<template>
  <div class="time-btn">
    <div class="type" :class="{'over':text.type === 0 || text.type === 2}">
      <div class="time-icon">
        <img width="100%" height="100%" src="../../../assets/img/time@2x.png">
      </div>
      <span class="type-text">{{text.name}}</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      text: {
        type: Object,
        default() {
          return {name: '进行中', type: 1}
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .time-btn
    .type
      position absolute
      display inline-flex
      right 0
      width 138px
      height 50px
      background #FF4136
      border-radius 10px
      align-items center
      justify-content center
      &.over
        background grey
      .time-icon
        width 30px
        height 30px
      .type-text
        margin-left 11px
        font-size 24px
        color #fff
</style>
